<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <z-paging
    ref="pagingRef"
    v-model="dataList"
    :paging-style="{'top': '0',background: '#f2f3f7'}"
    class="page-shop-settlement-detail"
    :default-page-size="12"
    @query="onGetdataList"
  >
    <!--空数据组件-->
    <template #empty>
      <empty-tips
        class="noData"
        :tips-list="['暂无数据']"
      />
    </template>

    <!--主内容-->
    <view
      v-if="dataList.length"
      class="Mall4j  container"
    >
      <view
        v-if="type==='0'"
        class="deal-detail"
      >
        <view class="content">
          <view v-if="dataList.length!==0">
            <view
              v-for="(item,index) in dataList"
              :key="index"
            >
              <view class="item">
                <span>{{ $options.option.amountType[item.amountType] }}</span> <view
                  :title="1"
                  :class="{'income-out':!item.ioType,'income-in':item.ioType}"
                >
                  {{ item.ioType?'+':'-' }}{{ Math.abs(item.changeAomunt) }}
                </view>
              </view>
              <view class="item-bottom">
                <view class="date">
                  交易时间：{{ item.createTime }}
                </view>
                <view
                  class="order"
                  style="margin-top:8rpx;"
                >
                  订单号：{{ item.orderNumber||'-' }}
                </view>
              </view>
              <hr>
            </view>
          </view>
        </view>
      </view>
      <view
        v-else
        class="withdraw-detail"
      >
        <view class="content">
          <view v-if="dataList.length!==0">
            <view
              v-for="(item,index) in dataList"
              :key="index"
            >
              <view class="item">
                <span>申请提现</span> <view calss="income-in">
                  {{ item.amount }}
                </view>
              </view>
              <view class="item-bottom">
                <view class="date">
                  {{ item.createTime }}
                </view>
                <view
                  v-if="paySettlementType !== 1"
                  :class="{'status-ing': item.status===1,'status-success': item.status===2,'status-fail': item.status===0}"
                >
                  {{ $options.option.withdrawStatus[item.status] }}
                </view>
                <view
                  v-else
                  :class="{'status-ing': item.allinpayStatus===0 || item.allinpayStatus===1,'status-success': item.allinpayStatus===2,'status-fail': item.allinpayStatus===3}"
                >
                  {{ $options.option.allinpayWithdrawStatus[item.allinpayStatus] }}
                </view>
              </view>
              <hr>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
const paySettlementType = uni.getStorageSync('bbcPaySettlementType')
const $options = {
  option: {
    amountType: ['未结算金额', '可用店铺余额', '冻结金额', '总结算金额'],
    withdrawStatus: ['审核失败', '审核中', '审核成功'],
    allinpayWithdrawStatus: ['待支付', '申请成功', '提现成功', '提现失败']
  }
}

const isLoaded = ref(false) // 列表是否加载完毕
const dataList = ref([])
const type = ref('')

onMounted(() => {
})

onLoad((option) => {
  uni.setNavigationBarTitle({
    title: option.type === '0' ? '交易明细' : '提现明细'
  })
  type.value = option.type
})

// 获取dataList 数据
const pagingRef = ref(null)
const onGetdataList = (current, size) => {
  uni.showLoading({
    title: '加载中'
  })
  const params = {
    url: type.value === '0' ? '/shop/shopWalletLog/page' : '/shop/withdrawCash/page',
    method: 'GET',
    data: {
      current,
      size
    }
  }
  http.request(params).then(({ data }) => {
    isLoaded.value = true
    if (type.value !== '0') {
      data.records.forEach(item => {
        item.status += 1
      })
    }

    pagingRef.value.complete(data.records)
    uni.hideLoading()
  })
}
</script>

<style lang="scss" scoped>
@use './shop-settlement-detail.scss';
</style>
